<template>
  <div class="approvals">
    审批
    <h2>测试页面</h2>
    <h3>1.0 判断元素是否出现在可视区域</h3>
    <div class="con"></div>
    <img
      v-imglazy="
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1932_jBFR5.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665460210&t=3b207f4fc764701524bdf596b39613e8'
      "
      alt=""
    />
    <img
      v-imglazy="
        'https://gimg2.baidu.com/iage_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1932_jBFR5.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665460210&t=3b207f4fc764701524bdf596b39613e8'
      "
      alt=""
    />
    <!-- <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1932_jBFR5.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665460210&t=3b207f4fc764701524bdf596b39613e8"
      alt=""
    /> -->
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 懒加载插件
import { useIntersectionObserver } from '@vueuse/core'
// 获取img标签
let myimg = ref<HTMLImageElement | null>(null)
// useIntersectionObserver方法
// 第一个参数是DOM元素,第二个参数是回调函数,参数是布尔值
// 布尔值如果是true表示DOM元素显示,赋予img的src值加载图片
useIntersectionObserver(myimg, ([{ isIntersecting }]) => {
  // isIntersecting: boolean值，判断元素是否出现在可视区域
  // console.log(isIntersecting)
  if (isIntersecting) {
    // 说明图片出现在可视区域，设置图片的地址
    myimg.value!.src =
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1932_jBFR5.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665460210&t=3b207f4fc764701524bdf596b39613e8'
  }
})
</script>
<style scoped lang="less">
.approvals {
  height: 3000px;
  background-color: #bfa;

  .con {
    height: 2500px;
  }
}
</style>
